import React, { Component} from 'react'
import { connect } from 'dva'
import { Form, Card, Input, Button,Icon} from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';

//监听
@connect(state => {
  const {articles:{isSavedSuccess}} = state
  return {isSavedSuccess}
})
class Add1 extends Component {

  submitHandler = e => {
    e.preventDefault()
    const {validateFields} = this.props.form;
    validateFields((err,values) => {
      if (!err) {
          // console.log(values);
          this.props.dispatch({
            type:'articles/addArticles',//models调用
            payload:values
          })
      }
    })
  }

  render(){
    const {getFieldDecorator:gfd} = this.props.form;
    const itemLayout = {
      labelCol:{
        xs:{span:24},
        sm:{span:7}
      },
      wrapperCol:{
        xs:{span:24},
        sm:{span:17}
      }
    }
    return(
      <PageHeaderLayout title="添加文章" content="输入文章并保存">
      {this.props.isSavedSuccess && <h1>保存成功！</h1>}
        <Card bordered={false}>
          <Form onSubmit={this.submitHandler}>
            <Form.Item {...itemLayout} label="标题">
              {
                gfd('title',{
                  rules:[{ required: true, message: 'Please input your item!' }]
                })(<Input/>)
              }
            </Form.Item>
            <Form.Item {...itemLayout} label="正文">
              {
                gfd('content',{
                  rules:[{ required: true, message: 'Please input your content!' },
                         {min:10,message:"请输入至少十个字"}]
                })(<Input.TextArea autosize={{minRows:10}}/>)
              }
            </Form.Item>
            <Form.Item wrapperCol={{span:8,offset:7}}>
              <Button type="primary" size="large" htmlType="submit">
                提交
              </Button>
            </Form.Item>
          </Form>
        </Card>
      </PageHeaderLayout>
    )
  }
}

export default Form.create()(Add1);
